<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/style/css/drink-water.css" />
  </head>
  <body>
    <main>
      <div class="title">
        .querySelector('p')
        <h2>Drink Water</h2>
        <p>Goal: 2 Liters</p>
      </div>
      <div class="cup">
        <div class="cup-remained">
          <h3>2L</h3>
          <p>Remained</p>
        </div>
        <p class="cup-water">37.5%</p>
      </div>
      <div class="select">
        <p class="select-tip">
          Select how many glasses of water that you have drank
        </p>
        <div class="region">
          <div class="glass" num="1">
            <p>250</p>
            <p>ml</p>
          </div>
          <div class="glass" num="2">
            <p>250</p>
            <p>ml</p>
          </div>
          <div class="glass" num="3">
            <p>250</p>
            <p>ml</p>
          </div>
          <div class="glass" num="4">
            <p>250</p>
            <p>ml</p>
          </div>
          <div class="glass" num="5">
            <p>250</p>
            <p>ml</p>
          </div>
          <div class="glass" num="6">
            <p>250</p>
            <p>ml</p>
          </div>
          <div class="glass" num="7">
            <p>250</p>
            <p>ml</p>
          </div>
          <div class="glass" num="8">
            <p>250</p>
            <p>ml</p>
          </div>
        </div>
      </div>
    </main>
  </body>
  <script>
    const glassEleArr = document.getElementsByClassName("glass");
    const cupWaterEle = document.querySelector(".cup-water");
    const remainedEle = document
      .querySelector(".cup-remained")
      .querySelector("h3");

    function updateWater(n) {
      let percentage = `${(100 / 8) * n}%`;
      let remainedSpace = (2000 - 250 * n) / 1000;
      console.log("remainedSpace: ", remainedSpace);
      //   console.log("---: ", percentage);
      //   console.log(cupWaterEle);
      cupWaterEle.innerHTML = percentage;
      cupWaterEle.style.height = `calc(100% / 8 * ${n})`;
      if (remainedSpace) {
        remainedEle.innerText = `${remainedSpace}L`;
      } else {
        remainedEle.parentElement.style.height = 0;
        // console.log(remainedEle.parentNode.style);
      }
    }

    for (let ele of glassEleArr) {
      ele.addEventListener("click", function (event) {
        console.log("click active: ", this.active);
        // console.log(
        //   "this.num",
        //   this.getAttribute("num"),
        //   typeof this.getAttribute("num")
        // );
        if (this.active) {
          this.active = 0;
          this.classList.remove("glass-select");
          console.log("this");
        } else {
          this.active = 1;
          this.classList.add("glass-select");
        }
        let n = this.getAttribute("num");
        updateWater(+n);
      });
    }
    // glassEleArr.forEach((ele) => {});
  </script>
</html>
